<template>
    <div
        class="w-25 h-75 d-flex-intro intro-text"
        :style="{
            color: props.color
        }"
    >
        <h1 style="margin-bottom: 1em; font-size: 3em;">{{ props.intro }}</h1>
        <slot></slot>
    </div>
</template>
<script setup>
const props = defineProps({
    intro: String,
    color: {
        default: 'black',
        type: String
    }
})
</script>
<style>
.d-flex-intro {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.intro-text {
    margin: 2em;
    font-family: 'Segoe UI', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
}
</style>
